<template>
  <h1>Hello Vue3</h1>
  <h2>{{ number }}</h2>
  <button @click="number++">点击累加</button>
</template>

<script>
import { ref, watch } from 'vue'
/* 
  目标：掌握使用 watch 函数定义侦听器

*/
export default {
  name: 'App',
  setup() {
    console.log('setup组合API的起点')
    // 情况1：监听 ref 定义的响应式数据
    const number = ref(0)

    // 🔔 Vue3 组合式API的 watch 写法
    watch(number, (newVal, oldVal) => {
      console.log('number发生了变化', { newVal, oldVal }, number.value)
    })

    return { number }
  },
  // Vue2 选项式API的 watch 写法
  // watch:{
  //   number(newVal,oldVal){
  //      console.log('number发生了变化', { newVal, oldVal })
  //   }
  // }
}
</script>

<style></style>
